<template>
  <!-- 顶部导航和分类导航 -->
  <div class="nav-header">
    <div class="nav-content">
      <!-- 顶部导航 -->
      <HomeNav />
    </div>
  </div>

  <!-- 主要内容区域 -->
  <div class="seckill-detail-container">
    <!-- 产品核心信息区 -->
    <div class="product-core-info">
      <!-- 左侧产品图片展示 -->
      <div class="product-gallery">
        <div class="main-image">
          <img :src="mainImage" :alt="product.name">
        </div>
        <div class="image-thumbnails">
          <img v-for="(img, index) in product.images" 
               :key="index" 
               :src="img" 
               :alt="product.name"
               @click="changeMainImage(img)">
        </div>
      </div>

      <!-- 右侧产品信息 -->
      <div class="product-info">
        <h1 class="product-title">{{ product.name }}</h1>
        <div class="product-brief">{{ product.brief }}</div>
        
        <div class="price-box">
          <div class="price-info">
            <div class="current-price">
              <span class="label">秒杀价</span>
              <span class="price">¥{{ product.seckillPrice }}</span>
            </div>
            <div class="original-price">
              <span class="label">原价</span>
              <span class="price">¥{{ product.originalPrice }}</span>
            </div>
          </div>
          <div class="discount-tag">
            限时优惠{{ ((1 - product.seckillPrice/product.originalPrice) * 100).toFixed(1) }}%
          </div>
        </div>

        <div class="seckill-info">
          <div class="countdown-box" v-if="!isSoldOut">
            <div class="countdown-label">{{ isStarted ? '距结束还剩：' : '距开始还剩：' }}</div>
            <div class="countdown-timer">
              <span class="time-block">{{ countDown.hours }}</span>
              <span class="time-separator">:</span>
              <span class="time-block">{{ countDown.minutes }}</span>
              <span class="time-separator">:</span>
              <span class="time-block">{{ countDown.seconds }}</span>
            </div>
          </div>

          <div class="progress-box">
            <div class="progress-info">
              <span>已售{{ product.soldCount }}件</span>
              <span>剩余{{ product.stock }}件</span>
            </div>
            <el-progress 
              :percentage="soldProgress" 
              :stroke-width="10"
              color="#ff4d4f"
            />
          </div>
        </div>

        <div class="action-box">
          <el-button 
            type="danger" 
            size="large" 
            class="seckill-btn"
            :disabled="!isStarted || isSoldOut"
            @click="handleSeckill"
          >
            {{ buttonText }}
          </el-button>
          <el-button 
            type="default" 
            size="large"
            icon="Share"
            class="share-btn"
          >
            分享
          </el-button>
        </div>

        <div class="service-tags">
          <span class="tag"><i class="el-icon-check"></i> 正品保证</span>
          <span class="tag"><i class="el-icon-check"></i> 极速退款</span>
          <span class="tag"><i class="el-icon-check"></i> 七天无理由退换</span>
        </div>
      </div>
    </div>

    <!-- 产品详细信息区 -->
    <div class="product-detail">
      <div class="detail-tabs">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="商品详情" name="detail">
            <div class="detail-content" v-html="product.description"></div>
          </el-tab-pane>
          <el-tab-pane label="规格参数" name="params">
            <div class="params-content">
              <!-- 规格参数内容 -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="用户评价" name="comments">
            <div class="comments-content">
              <!-- 评价内容 -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>

  <!-- 底部区域 -->
  <HomeFooter />
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import HomeNav from '@/components/layout/HomeNav.vue';
import HomeFooter from '@/components/layout/HomeFooter.vue';
import { ElMessage } from 'element-plus';

const product = ref({
  id: 1,
  name: "示例商品",
  image: require('@/assets/imgs/goods/jdzoom_big_01.jpg'),
  seckillPrice: 99,
  originalPrice: 199,
  description: "商品详细描述",
  startTime: Date.now() + 3600000, // 示例：1小时后开始
  endTime: Date.now() + 7200000,   // 示例：2小时后结束
  stock: 9,
  soldCount: 1,
  images: [require('@/assets/imgs/goods/jdzoom_big_01.jpg'), require('@/assets/imgs/goods/jdzoom_big_02.jpg')],
  brief: "商品简短描述"
});

const countDown = ref({
  hours: '00',
  minutes: '00',
  seconds: '00'
});

const isStarted = ref(false);
const isSoldOut = ref(false);

// 添加主图状态
const mainImage = ref(product.value.image);

// 切换主图方法
const changeMainImage = (img) => {
  mainImage.value = img;
};

const buttonText = computed(() => {
  if (!isStarted.value) return '秒杀未开始';
  if (isSoldOut.value) return '已售罄';
  return '立即秒杀';
});

let timer;

const updateCountDown = () => {
  const now = Date.now();
  const target = product.value.startTime;
  const diff = target - now;

  if (diff <= 0) {
    isStarted.value = true;
    clearInterval(timer);
    return;
  }

  const hours = Math.floor(diff / 3600000);
  const minutes = Math.floor((diff % 3600000) / 60000);
  const seconds = Math.floor((diff % 60000) / 1000);

  countDown.value = {
    hours: hours.toString().padStart(2, '0'),
    minutes: minutes.toString().padStart(2, '0'),
    seconds: seconds.toString().padStart(2, '0')
  };
};

const handleSeckill = async () => {
  try {
    // 调用秒杀API
    console.log('开始秒杀');
  } catch (error) {
    console.error('秒杀失败', error);
  }
};

const soldProgress = computed(() => {
  const total = product.value.soldCount + product.value.stock;
  return Math.floor((product.value.soldCount / total) * 100);
});

const activeTab = ref('detail');

onMounted(() => {
  updateCountDown();
  timer = setInterval(updateCountDown, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.seckill-detail-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;

  .product-core-info {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    .product-gallery {
      width: 400px;
      
      .main-image {
        width: 400px;
        height: 400px;
        border: 1px solid #f0f0f0;
        border-radius: 4px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .image-thumbnails {
        display: flex;
        gap: 10px;
        margin-top: 10px;
        
        img {
          width: 60px;
          height: 60px;
          border: 1px solid #f0f0f0;
          border-radius: 4px;
          cursor: pointer;
          
          &:hover {
            border-color: #ff4d4f;
          }
        }
      }
    }

    .product-info {
      flex: 1;
      
      .product-title {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
      }

      .product-brief {
        color: #666;
        font-size: 14px;
        margin-bottom: 20px;
      }

      .price-box {
        background: #fff5f5;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 20px;

        .price-info {
          display: flex;
          align-items: baseline;
          gap: 20px;

          .current-price {
            .label {
              font-size: 14px;
              color: #666;
            }
            .price {
              font-size: 32px;
              color: #ff4d4f;
              font-weight: bold;
              margin-left: 5px;
            }
          }

          .original-price {
            .label {
              font-size: 12px;
              color: #999;
            }
            .price {
              font-size: 14px;
              color: #999;
              text-decoration: line-through;
              margin-left: 5px;
            }
          }
        }

        .discount-tag {
          display: inline-block;
          margin-top: 10px;
          padding: 2px 8px;
          background: #ff4d4f;
          color: #fff;
          border-radius: 4px;
          font-size: 12px;
        }
      }

      .seckill-info {
        margin-bottom: 30px;

        .countdown-box {
          margin-bottom: 20px;

          .countdown-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
          }

          .countdown-timer {
            display: flex;
            align-items: center;
            gap: 5px;

            .time-block {
              background: #333;
              color: #fff;
              padding: 8px 12px;
              border-radius: 4px;
              font-size: 20px;
              font-weight: bold;
            }

            .time-separator {
              color: #333;
              font-weight: bold;
              font-size: 20px;
            }
          }
        }

        .progress-box {
          .progress-info {
            display: flex;
            justify-content: space-between;
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
          }
        }
      }

      .action-box {
        display: flex;
        gap: 20px;
        margin-bottom: 30px;

        .seckill-btn {
          width: 240px;
          height: 50px;
          font-size: 18px;
        }

        .share-btn {
          width: 50px;
          height: 50px;
        }
      }

      .service-tags {
        display: flex;
        gap: 20px;

        .tag {
          color: #666;
          font-size: 14px;
          
          i {
            color: #52c41a;
            margin-right: 4px;
          }
        }
      }
    }
  }

  .product-detail {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    .detail-content {
      padding: 20px 0;
    }
  }
}
</style>